<template>
  <div id="app">
    <div class="container-fluid">
      <!-- 头部开始 -->
      <header>
        <div class="row">
          <div class="col-xs-12 col-md-8">
            <div class="header-left">
              <a href="http://www.chimabj.com.cn/">
                北京西马远东医疗投资管理有限公司(2005-2020)
              </a>
            </div>
          </div>
          <div class="col-xs-6 col-md-4">
            <div class="header-right">
              <router-link to="/">首页</router-link>
            </div>
          </div>
        </div>
      </header>
      <!-- 头部结束 -->
      <!-- 背景图开始 -->
      <div class="bg">
        <div class="row">
          <div class="col-xs-12 col-md-8 bgtu"></div>
        </div>
      </div>
      <!-- 背景图结束 -->
      <!-- 导航开始 -->
      <div class="navbox">
        <div class="row navigation">
          <div class="col-xs-12 col-md-8">
            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button
                    type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false"
                  >
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <router-link class="navbar-brand" to="/">西马远东医疗</router-link>
                </div>
                <div
                  class="collapse navbar-collapse"
                  id="bs-example-navbar-collapse-1"
                >
                  <ul class="nav navbar-nav">
                    <li class="dropdown">
                      <router-link
                        to="/"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        >关于西马<span class="caret"></span
                      ></router-link>
                      <ul class="dropdown-menu">
                        <li><router-link to="/">西马简介</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/culture">我们的企业文化</router-link></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <router-link
                        to="/ProductDescription"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        >成本管理<span class="caret"></span
                      ></router-link>
                      <ul class="dropdown-menu">
                         <li><router-link to="/ProductDescription">产品概述</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li>
                          <router-link to="/ProductSystem">产品体系</router-link>
                        </li>
                         <li role="separator" class="divider"></li>
                        <li><router-link to="/InfluenzaSurveillanceReports">流感监测上报</router-link></li>
                         <li role="separator" class="divider"></li>
                        <li><router-link to="/PerformanceApp">绩时查APP</router-link></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <router-link
                        to="/foreign"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        >合作<span class="caret"></span
                      ></router-link>
                      <ul class="dropdown-menu">
                        <li><router-link to="/foreign">德国合作</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/domestic">国内合作</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/cooperate">合作伙伴</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/research">调研交流</router-link></li>
                      </ul>
                    </li>
                    <li><router-link to="/drgs">关于DRGs</router-link></li>
                    <li class="dropdown">
                      <a
                        href="#"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        >DRGs案例<span class="caret"></span
                      ></a>
                      <ul class="dropdown-menu">
                        <li><router-link to="/single">单个编码查询</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/multiple">批量编码查询</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/singleGroup">病案分组管理</router-link></li>
                        <li role="separator" class="divider"></li>
                        <li><router-link to="/multipleGroup">批量分组管理</router-link></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
        <router-view />
      </div>
      <!-- 导航结束 -->
    </div>
    <footer>
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="tip1">
            <div class="footContent1">
              <div class="content1">
                <router-link to="/">关于西马</router-link>
              </div>
              <div class="content2">
                <div>
                  <router-link to="/">西马简介</router-link>
                </div>
                <div>
                  <router-link to="/culture">我们的企业文化</router-link>
                </div>
              </div>
            </div>
            <div class="footContent2">
              <div class="content1">
                <router-link to="/foreign">合作</router-link>
              </div>
              <div class="content2">
                <div><router-link to="/foreign">德国合作</router-link></div>
                <div><router-link to="/domestic">国内合作</router-link></div>
                <div><router-link to="/cooperate">合作伙伴</router-link></div>
                <div><router-link to="/research">调研交流</router-link></div>
              </div>
            </div>
            <div class="footContent3">
              <div class="content1">
                <div><router-link to="/ProductDescription">成本管理</router-link></div>
              <div class="content2">
                <div><router-link to="/ProductDescription">产品概述</router-link></div>
                <div><router-link to="/ProductSystem">产品体系</router-link></div>
                <div><router-link to="/InfluenzaSurveillanceReports">流感监测上报</router-link></div>
                <div><router-link to="/PerformanceApp">绩时查APP</router-link></div>
              </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="tip2">
            <div class="footContent4">
              <div class="content1">
                <router-link to="/drgs">关于DRGs</router-link>
              </div>
            </div>
            <div class="footContent5">
              <div class="content1">
                <router-link to="/single">DRGs案例</router-link>
              </div>
              <div class="content2">
                <div><router-link to="/single">单个编码查询</router-link></div>
                <div><router-link to="/multiple">批量编码查询</router-link></div>
                <div><router-link to="/singleGroup">病案分组管理</router-link></div>
                <div><router-link to="/multipleGroup">批量分组管理</router-link></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style lang="less">
#app {
  font-family: "微软雅黑", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  box-sizing: content-box;
}
  header {
    width: 100%;
    background: #0a77a0;
    .row {
      background-color: #0a77a0;
      .header-left {
        a {
          line-height: 2.5rem /* 40/16 */;
          text-decoration: none;
          color: #fff;
          font-size: 14px;
        }
      }
      .header-right {
        float: right;
        a {
          line-height: 2.5rem /* 40/16 */;
          text-decoration: none;
          color: #fff;
          font-size: 14px;
          display: inline-block;
        }
      }
    }
  }
  .bg {
    width: 100%;
    height: 139px;
    background: url("./assets/logo1.jpg") no-repeat center;
    .bgtu {
      width: 100%;
      height: 100%;
    }
  }
  .navbox {
    width: 100%;
  }
  footer {
    width: 100%;
    position: absolute;
    background-color: #0a77a0;
    // bottom: 0;
    .tip1 {
      width: 100%;
      height:auto;
      display: flex;
      margin: 0 auto;
      .footContent1,
      .footContent2,
      .footContent3 {
        width: calc(100% / 3);
        height: 100%;
        padding-left: 3.125rem /* 50/16 */;
        padding-top: 3.125rem /* 50/16 */;
        .content1 {
          text-align: center;
          a {
            font-size: 1.5rem /* 24/16 */;
            font-weight: bold;
            color: #fff;
            line-height: 1.875rem /* 30/16 */;
            text-align: center;
          }
        }
        .content2 {
          text-align: center;
          div {
            margin:1.25rem /* 20/16 */ 0;
            a {
              line-height: 1.875rem /* 30/16 */;
              font-size: 1.25rem /* 20/16 */;
              font-weight: bolder;
              color: #fff;
              line-height: 1.875rem /* 30/16 */;
              text-align: center;
            }
          }
        }
        .content3{
           text-align: center;
          div {
            margin:1.25rem /* 20/16 */ 0;
            a {
              line-height: 1.875rem /* 30/16 */;
              font-size: 1.25rem /* 20/16 */;
              font-weight: bolder;
              color: #fff;
              line-height: 1.875rem /* 30/16 */;
              text-align: center;
            }
          }
        }
      }
    }
    .tip2 {
      width: 100%;
      height:auto;
      display: flex;
      .footContent4,
      .footContent5 {
        width: calc(100% / 2);
        height: 100%;
        padding-top: 3.125rem /* 50/16 */;
        .content1 {
          text-align: center;
          a {
           font-size: 1.5rem /* 24/16 */;
            font-weight: bolder;
            color: #fff;
            line-height: 1.875rem /* 30/16 */;
            text-align: center;
          }
        }
        .content2 {
          text-align: center;
          div {
            margin:1.25rem /* 20/16 */ 0;
            a {
              line-height: 1.875rem /* 30/16 */;
              font-size: 1.25rem /* 20/16 */;
              font-weight: bolder;
              color: #fff;
              line-height: 1.875rem /* 30/16 */;
              text-align: center;
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 992px){
.bg {
    width: 100%;
    height: 139px;
    background: url("./assets/bg2.jpg") no-repeat center;
  }
  }
</style>
